<template>
  <div class="tiktok-search">
    <c-title text="搜索"></c-title>
    <div class="top">
      <van-search
        style="width: 100%;"
        v-model="SearchValue"
        shape="round"
        @search="search"
        placeholder="输入关键词/口令搜索"
      />
    </div>
    <div class="tab">
      <span @click="choose(1)" :class="{ active: choose_index == 1 }">综合</span>
      <span
        @click="choose(2)"
        :class="{ active: choose_index == 2 ,  up: sort.up == 1 &&  choose_index == 2, down: sort.down == 1 &&  choose_index == 2}"
        class="grid-content"
      >销量</span>
      <span
        @click="choose(3)"
        :class="{ active: choose_index == 3 , up: sort.up == 1 && choose_index == 3, down: sort.down == 1 &&  choose_index == 3 }"
        class="grid-content"
      >价格</span>
    </div>
    <div style="background: #fff; padding-top: 0.625rem;">
      <GoodList :goodsList="list"></GoodList>
    </div>
  </div>
</template>

<script>
import GoodList from "./component/goods.vue";
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  components: { GoodList },
  data() {
    return {
      list: [],
      SearchValue: "",
      choose_index: 1,
      cate_id:"",
      sort: {
        up: 0,
        down: 0
      },

      search_type:0,
      order_type:0,

      current_page: 1,
      last_page: 1,
      isLoadMore: true
    };
  },

  activated() {
    let json = { page: 1 ,title:this.SearchValue,search_type:this.search_type,order_type:this.order_type}
    this.isLoadMore = true;
    if(this.$route.params.cate_id){
      this.cate_id = this.$route.params.cate_id;
      json.cate_id =  this.$route.params.cate_id;
    }
    if(this.$route.params.title){
      json.title  = decodeURI(String(this.$route.params.title));
      this.SearchValue = decodeURI(String(this.$route.params.title));
    }
    this.getData(json)
  },
  methods: {
    search() {
      this.getData({ page: 1, title: this.SearchValue,search_type:this.search_type,order_type:this.order_type });
    },
    async getData(json) {
      let { result, msg, data } = await $http.get("plugin.tiktok-cps.api.goods.good-list", json);
      if (result == 0) {
        return this.$toast(msg);
      }
      if (json.page == 1) {
        this.list = data.products || [];
      } else if (json.page > 1) {
        this.list = this.list.concat(data.products);
      }
      this.current_page = Number(data.current_page);
      this.last_page = data.last_page;
      this.isLoadMore = true;
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let json = {}
      json.page = page;
      json.search_type = this.search_type;
      json.order_type = this.order_type;
      json.title = this.SearchValue;
      if(this.cate_id){
        json.cate_id = this.cate_id;
      }
      this.getData(json);
    },
    choose(index) {
      this.choose_index = index;
      let order_type = 0;
      if (index == 2 || index == 3 || index == 4) {
        if (this.sort.up == 0 && this.sort.down == 0) {
          this.sort.up = 1;
        } else if (this.sort.up == 1) {
          this.sort.down = 1;
          this.sort.up = 0;
        } else if (this.sort.down == 1) {
          this.sort.up = 1;
          this.sort.down = 0;
        }
      } else if (this.choose_index !== 3 || index == 2 || index == 4) {
        this.sort.up = 0;
        this.sort.down = 0;
      }
      if (this.sort.down == 1) {
        order_type = 1;
      }
      let search_type = index - 1;
      this.order_type = order_type;
      this.search_type = search_type;
      this.getData({ page: 1, search_type, order_type,title:this.SearchValue });
    }
  }
};
</script>

<style scoped lang="scss">
.tiktok-search {
  .active {
    color: #ef5452;
  }

  .grid-content::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.625rem;
    background: url(../../../assets/images/jd-sprites.png) no-repeat;
    background-size: 12.5rem 12.5rem;
    background-position: -10.625rem -1.875rem;
    margin-left: 0.25rem;
  }

  .grid-content.up,
  .grid-content.down {
    color: #f15353;
  }

  .grid-content.up::after {
    background-position: -10.625rem -0.9375rem;
  }

  .grid-content.down::after {
    background-position: -10.625rem 0;
  }

  .tab {
    display: flex;
    justify-content: space-evenly;
    padding-top: 10px;
    padding-bottom: 12px;
    background: #fff;
    margin-bottom: 0.625rem;
  }

  .top {
    display: flex;
    background: #fff;
    align-items: center;
  }
}
</style>
